<template>
  <div class="comput-main">
    <div class="title">
      <div></div>
      <div class="content-center" :class="{'active':titleType == 0}" @click="titleTypeChange(0)">计算</div>
      <div class="content-center" :class="{'active':titleType == 1}" @click="titleTypeChange(1)">换算</div>
      <div class="content-center" :class="{'active':titleType == 2}" @click="titleTypeChange(2)">税贷</div>
      <div></div>
    </div>
    <div class="swiper-container swiper-main">
      <div class="swiper-wrapper">
        <calculator class="swiper-slide" />
        <div class="swiper-slide">
          2
        </div>
        <div class="swiper-slide">
          3
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import Swiper from "swiper";
import Calculator from "@/components/Calculator";
export default {
  data() {
    return {
      titleType: 0,
      mSwiper: null
    };
  },
  methods: {
    initSwiper() {
      // const _this = this;
      this.mSwiper = new Swiper(".swiper-main", {
        initialSlide: this.titleType,
        onTransitionEnd: swiper => {
          this.titleType = swiper.activeIndex;
        }
      });
    },
    titleTypeChange(type) {
      this.titleType = type;
      if (this.mSwiper) this.mSwiper.slideTo(type);
    }
  },
  mounted() {
    this.initSwiper();
  },
  components: { Calculator }
};
</script>

<style>
@import url("swiper/dist/css/swiper.min.css");
.comput-main {
  height: 100%;
  width: 100%;
  background: #f0f0f0;
}
.comput-main .title {
  height: 45px;
  display: flex;
}
.comput-main .title > div {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #303030;
}
.comput-main .title > div.active {
  color: #ed682c;
}
.comput-main .swiper-main {
  position: fixed;
  top: 45px;
  bottom: 0;
  left: 0;
  right: 0;
}
.swiper-slide {
  position: relative;
}
</style>
